{% extends "base.html" %}

{% block content %}
<div class="algorithm-page">
    <h2>LSB算法 - 最低有效位隐写</h2>
    
    <div class="algorithm-description">
        <p>LSB算法通过修改图像像素的最低有效位来隐藏信息，对图像质量影响较小。</p>
        <p><strong>使用提示：</strong>建议使用PNG格式图片以获得更好的效果，JPEG格式可能会因压缩导致数据丢失。</p>
    </div>
    
    <div class="algorithm-controls">
        <div class="control-section">
            <h3>嵌入信息</h3>
            <form id="embed-form" enctype="multipart/form-data">
                <div class="form-group">
                    <label for="embed-image">选择载体图像 (建议PNG格式):</label>
                    <input type="file" id="embed-image" name="image" accept="image/png,image/jpeg,image/bmp" required>
                    <small>支持格式: PNG, JPEG, BMP</small>
                </div>
                
                <div class="form-group">
                    <label for="embed-message">隐藏信息:</label>
                    <textarea id="embed-message" name="message" rows="4" placeholder="输入要隐藏的信息" required></textarea>
                    <small>最大容量取决于图像尺寸</small>
                </div>
                
                <button type="submit" class="btn">嵌入信息</button>
            </form>
            
            <div id="embed-result" class="result"></div>
        </div>
        
        <div class="control-section">
            <h3>提取信息</h3>
            <form id="extract-form" enctype="multipart/form-data">
                <div class="form-group">
                    <label for="extract-image">选择隐写图像:</label>
                    <input type="file" id="extract-image" name="image" accept="image/png,image/jpeg,image/bmp" required>
                    <small>请使用嵌入时生成的图像</small>
                </div>
                
                <button type="submit" class="btn">提取信息</button>
            </form>
            
            <div id="extract-result" class="result">
                <label>提取的信息:</label>
                <textarea id="extracted-message" rows="4" readonly placeholder="提取的信息将显示在这里"></textarea>
                <div id="extract-status"></div>
            </div>
        </div>
    </div>
    
    <div class="debug-info">
        <h3>调试信息</h3>
        <div id="debug-console" style="background: #f8f9fa; padding: 10px; border-radius: 4px; font-family: monospace; font-size: 12px; height: 100px; overflow-y: auto;"></div>
    </div>
</div>

<script>
    function debugLog(message) {
        const console = document.getElementById('debug-console');
        const timestamp = new Date().toLocaleTimeString();
        console.innerHTML += `[${timestamp}] ${message}\n`;
        console.scrollTop = console.scrollHeight;
    }

    document.getElementById('embed-form').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const resultDiv = document.getElementById('embed-result');
        
        debugLog('开始嵌入信息...');
        
        // 更新为新的端点
        fetch('/embed_lsb', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                resultDiv.innerHTML = `
                    <div class="success">${data.message}</div>
                    <a href="${data.image_url}" class="btn" download>下载隐写图像</a>
                `;
                debugLog('信息嵌入成功！');
            } else {
                resultDiv.innerHTML = `<div class="error">${data.error}</div>`;
                debugLog(`嵌入失败: ${data.error}`);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            resultDiv.innerHTML = `<div class="error">发生错误: ${error.message}</div>`;
            debugLog(`请求错误: ${error.message}`);
        });
    });
    
    document.getElementById('extract-form').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const statusDiv = document.getElementById('extract-status');
        const messageTextarea = document.getElementById('extracted-message');
        
        statusDiv.innerHTML = '<div>正在提取信息...</div>';
        messageTextarea.value = '';
        debugLog('开始提取信息...');
        
        // 更新为新的端点
        fetch('/extract_lsb', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                messageTextarea.value = data.message;
                if (data.message) {
                    statusDiv.innerHTML = '<div class="success">信息提取成功！</div>';
                    debugLog('信息提取成功！');
                } else {
                    statusDiv.innerHTML = '<div class="error">未找到隐藏信息</div>';
                    debugLog('未找到隐藏信息');
                }
            } else {
                messageTextarea.value = '';
                statusDiv.innerHTML = `<div class="error">${data.error}</div>`;
                debugLog(`提取失败: ${data.error}`);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            messageTextarea.value = '';
            statusDiv.innerHTML = `<div class="error">发生错误: ${error.message}</div>`;
            debugLog(`请求错误: ${error.message}`);
        });
    });
</script>
{% endblock %}